<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-8">
        <el-tabs v-model="activeName">
          <el-tab-pane label="联担" name="union" v-if="hasUnion">
            <div class="row d-flex">
              <div class="col" v-for="menu in menuUnion" :key="menu.title">
                <menu-card :menu="menu"></menu-card>
              </div>
              <div class="col"></div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="col-4">
        <menu-list></menu-list>
      </div>
    </div>
  </div>
</template>

<script>
import MenuCard from '@/credit/views/city/bus/index/MenuCard.vue'
import MenuList from '@/credit/views/city/bus/index/MenuList'
import { mapGetters } from 'vuex'

export default {
  components: {
    MenuList,
    MenuCard,
  },
  data() {
    return {
      hasUnion: false,
      activeName: 'self',
      menuUnion: [
        {
          title: '常规28业务',
          desc: '业务简介',
          icon: 'fa fa-leaf',
          iconColor: '#F97F51',
          route: {
            path: '/credit/task/routine',
          },
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  created() {
    this.getUnion()
  },
  methods: {
    // 是否有联担
    async getUnion() {
      const res = await this.$api.getData({
        table: 'credit_agency_access_view',
        params: {
          'access_agency_id.eq': this.clientId,
          'agency_type.eq': 6,
          'access_status.gt': 0,
          'service_agency_lever.eq': '1', // 省联担
          fields: ['access_agency_id'],
        },
      })
      this.hasUnion = !!res?.data?.length
      this.activeName = this.hasUnion ? 'union' : 'self'
    },
  },
}
</script>
<style lang="scss" scoped></style>
